<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>

    <%@include file="common/head.jsp" %>

</head>

<body>

<!-- 侧边栏 移动端 -->
<div class="responsive-header visible-xs visible-sm">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="top-section">
                    <div class="profile-content">
                        <h3 class="profile-title">Jsoup</h3>
                        <p class="profile-description">Java萌新</p>
                    </div>
                </div>
            </div>
        </div>
        <a href="#" class="toggle-menu"><i class="fa fa-bars"></i></a>
        <div class="main-navigation responsive-menu">
            <ul class="navigation">
                <li>
                    <a href="/index#top"><i class="fa fa-globe"></i>首页</a>
                </li>
                <li>
                    <a href="/index#about"><i class="fa fa-pencil"></i>关于</a>
                </li>
                <li>
                    <a href="/index#article"><i class="fa fa-paperclip"></i>博文</a>
                </li>
                <li>
                    <a href="/index#contact"><i class="fa fa-link"></i>留言</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<!-- 侧边栏 PC端 -->
<div class="sidebar-menu hidden-xs hidden-sm">
    <div class="top-section">
        <h3 class="profile-title">Jsoup</h3>
        <p class="profile-description">Java萌新</p>
    </div>
    <div class="main-navigation">
        <ul class="navigation">
            <li>
                <a href="/index#top"><i class="fa fa-globe"></i>首页</a>
            </li>
            <li>
                <a href="/index#article"><i class="fa fa-paperclip"></i>博文</a>
            </li>
            <li>
                <a href="/index#about"><i class="fa fa-pencil"></i>关于</a>
            </li>
            <li>
                <a href="/index#contact"><i class="fa fa-link"></i>留言</a>
            </li>
        </ul>
    </div>
</div>

<!-- 主图文字 -->
<div class="banner-bg" id="top">
    <div class="banner-overlay"></div>
    <div class="welcome-text">
        <h2>Jsoup is my name</h2>
        <h5>If you want to compare West Lake with the west, you should always wear the same makeup.</h5>
    </div>
</div>

<!-- 主内容 -->
<div class="main-content">
    <div class="fluid-container">

        <div class="content-wrapper">

            <div class="page-section" id="article">
                <div class="row">
                    <div class="col-md-12">
                        <h4 class="widget-title">ARTICLE 博文</h4>
                    </div>
                </div>
                <div class="row projects-holder">
                    <c:forEach items="${articleList}" var="article">
                        <div class="col-md-4 col-sm-6">
                            <div class="thumbnail" onclick="window.location.href='/article/getArticle?articleId=${article.articleId}'">
                                <img src="${article.articlePicture}" class="img-rounded" alt="...">
                                <div class="caption">
                                    <h3 class="h3-widget-title">${article.articleTitle}</h3>
                                    <p><i class="fa fa-clock-o"></i> 时间：${fn:substring(article.articleCreateDate, 0, 10)} <i class="fa fa-eye"></i> 浏览：${article.articleViews}</p>
                                </div>
                            </div>
                        </div>
                    </c:forEach>
                </div>
                <div class="row text-center" style="margin-top: 20px">
                    <button type="button" onclick="window.location.href='/article/articleList'" class="btn btn-primary">更多博文</button>
                </div>
            </div>
            <hr>

            <div class="page-section" id="about">
                <div class="row">
                    <div class="col-md-6">
                        <h4 class="widget-title">ABOUT 关于</h4>
                        Hello, my name is Tang Haihong.<br>
                        A dreamy youth running on the road of dreams is eager to move forward.<br>
                        你好，我的名字叫汤海鸿。<br>
                        一个奔跑在追梦道路上的有志青年，为了梦想奋不顾身的前行。<br>
                        <h4 class="widget-title" style="margin-top: 40px;">LINK 链接</h4>
                        CSDN：<a target="_blank" href="https://blog.csdn.net/qq_38762237">https://blog.csdn.net/qq_38762237</a><br/>
                        码云：<a target="_blank" href="https://gitee.com/it_tom">https://gitee.com/it_tom</a><br/>
                        QQ群：<a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=d93a759517bc771a8b78ae6f627c331ee30f7ab966c0591caaa23dbf259dfc0d">开发交流群</a><br/>
                    </div>
                    <div class="col-md-6 text-center">
                        <img src="/resources/images/QQ.jpg" width="250px" height="280px">
                    </div>
                </div>
            </div>
            <hr>

            <div class="page-section" id="contact">
                <div class="row">
                    <div class="col-md-12">
                        <h4 class="widget-title">STAY WORD 留言</h4>
                    </div>
                </div>
                <div class="row">
                    <form class="contact-form" id="stayWordForm">
                        <fieldset class="col-md-12 col-sm-12 user-stayword-message">
                        </fieldset>
                        <fieldset class="col-md-4 col-sm-6">
                            <input type="text" name="staywordName" class="staywordName" placeholder="名字...">
                        </fieldset>
                        <fieldset class="col-md-4 col-sm-6">
                            <input type="email" name="staywordEmail" class="staywordEmail" placeholder="邮箱...">
                        </fieldset>
                        <fieldset class="col-md-4 col-sm-12">
                            <input type="text" name="staywordSubject" class="staywordSubject" placeholder="主题...">
                        </fieldset>
                        <fieldset class="col-md-12 col-sm-12">
                            <textarea name="staywordMessage" class="staywordMessage" cols="30" rows="6" maxlength="254" placeholder="登录之后才可以留言哦..."></textarea>
                        </fieldset>
                        <fieldset class="col-md-12 col-sm-12 text-center">
                            <button type="button" class="btn btn-primary" id="staywordBtn">发送留言</button>
                        </fieldset>
                    </form>
                </div>
            </div>
            <hr>

            <%@include file="common/footer.jsp" %>

        </div>

    </div>
</div>

<%@include file="common/end.jsp" %>


</body>

</html>